<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <!-- <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style type="text/css">

    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="background-color: #03a9f4;position:fixed;" id="header">
        <a class="aui-pull-left aui-btn" tapmode onclick="closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" id="title">
            异常图片列表
        </div>
    </header>
    <div class="aui-content" style="margin-top:50px;">
        <div class="aui-form">
            <div class="aui-content" style="background-color: #ffffff">
                <ul class="aui-list-view aui-grid-view" id="imgslist">
                    <!-- <li class="aui-list-view-cell aui-img aui-col-xs-4" id="addpic" onclick="imgClick()">
                        <img class="aui-img-object" src="../image/add.jpg">
                    </li> -->
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/hammer.min.js"></script>
<script type="text/javascript" src="../script/public.js"></script>
<script type="text/javascript">
    var billId = "";
    var uiMediaScanner = null;
    var imageFilter = null;
    var imageBrowser = null;

    //初始化
    apiready = function() {

        billId = api.pageParam.billId;

        // 引入多选模块
        uiMediaScanner = api.require('UIMediaScanner');
        // 引入过滤压缩模块
        imageFilter = api.require("imageFilter");
        // 引入图片浏览模块
        imageBrowser = api.require('imageBrowser');



        init();

    }

    //查询图片列表
    function init() {
        var un = localStorage.getItem('un');
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/getUsmPicByBill";
        var data = {
            values: {
                billId: billId,
                un: un,
            }
        };

        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 300,
            returnAll: false,
            data: data
        }, function(ret, err) {
            if (ret) {
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");
                if (myobj.code == '0') {

                    var trans = api.require('trans');
                    var list = eval(myobj.list);
                    $("#imgslist").children().remove();

                    for (var i = 0; i < list.length; i++) {

                        // 压缩文件的保存目录
                        var savePath = api.cacheDir + "/" + getNowFormatDate() + "/";
                        // 压缩文件生成的随机文件名称
                        var savename = NewGuid() + ".png";

                        var ylBrowerImgs = savePath + savename;

                        var pictureSrc = "data:image/jpg;base64," + list[i].photoData;
                        var showImgHtml = "<li class='aui-list-view-cell aui-img aui-col-xs-4' onclick='lookImg(\"" + ylBrowerImgs + "\")'><img class='aui-img-object' src='" + pictureSrc + "' style='width:100px;height:100px;'></li>";
                        $("#imgslist").append(showImgHtml);

                        trans.saveImage({
                            base64Str: list[i].photoData,
                            imgPath: savePath,
                            imgName: savename
                        }, function(ret, err) {
                            if (ret.status) {
                                console.log(ret.status);
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                        // browerImgs.push(savePath + savename);
                    }
                    if (list.length == 0) {
                        alert("未获取到异常图片");
                    }

                } else {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                }
            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    //返回按钮
    function closeWin() {
        api.closeWin({});
    }

    // 为图片添加点击预览功能,排除添加按钮
    function lookImg(compressImg) {
        // 定义一个数组，存储需要预览的图片
        var browerImgs = [];
        // 调用图片预览函数
        browerImgs.push(compressImg);
        openImageBrowser(browerImgs);
    }

    // 图片压缩
    // imgsrc：源图片的路径
    // quality：图片压缩质量，一般建议0.5
    // scale：图片压缩比例，也是建议0.5
    // ext：源图片拓展名
    // callback：转换成功之后回调函数
    function imgCompress(imgsrc, quality, scale, ext, callback) {
        // 压缩文件的保存目录
        var savePath = api.cacheDir + "/" + getNowFormatDate() + "/";
        // 压缩文件生成的随机文件名称
        var savename = NewGuid() + "." + ext;
        imageFilter.compress({
            img: imgsrc,
            quality: quality,
            scale: quality,
            save: {
                album: false,
                imgPath: savePath,
                imgName: savename
            }
        }, function(ret, err) {
            if (ret) {
                callback(savePath + savename);
            } else {
                alert(JSON.stringify(err));
            }
        });
    }

    // 打开图片浏览
    // imgs：需要预览的图片集合
    function openImageBrowser(imgs) {
        imageBrowser.openImages({
            imageUrls: imgs,
            showList: false,
            activeIndex: 0
        });
    }

    // 获取当前的时间，拼接成2015-11-09这样的格式，主要用于对图片进行时间分类
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate
        return currentdate;
    }

    // 生成guid,主要用于生成随机文件名
    function NewGuid() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    }
</script>

</html>
